<template>
  <div class="select_box">
    <button @click="allGoalSelect()" v-show="!isSelect">
      {{ onekey ? "全选" : "全不选" }}
    </button>
    <ul class="select_list">
      <li class="select_item" v-for="(item, index) in list" :key="index">
        <div>{{ item.aaa }}</div>
        <div v-show="!isSelect" class="select_ing" @click="select(index)">
          <img
            src="../images/icon/icon_selected.png"
            alt=""
            v-show="item.select"
          />
          <img
            src="../images/icon/icon_unselect.png"
            alt=""
            v-show="!item.select"
          />
        </div>
        <div class="no_select" v-show="isSelect" @click="noSelect(index)">
          <img src="../images/icon//icon_select_normal.png" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          aaa: 111,
          select: false
        },
        {
          aaa: 222,
          select: false
        },
        {
          aaa: 333,
          select: false
        },
        {
          aaa: 444,
          select: false
        },
        {
          aaa: 555,
          select: false
        }
      ],
      isSelect: true,
      onekey: 0
    };
  },
  methods: {
    noSelect(index) {
      this.onekey = 1;
      this.isSelect = false;
      this.list[index].select = true;
    },
    select(index) {
      this.list[index].select = !this.list[index].select;
      // 全不选
      const allNoSelect = this.list.every(item => {
        return !item.select;
      });
      // 全选
      const allSelect = this.list.every(item => {
        return item.select;
      });
      // 全不选时isSelect设置为true
      if (allNoSelect) this.isSelect = true;
      // 设置onekey字符串
      allSelect ? (this.onekey = 0) : (this.onekey = 1);
    },
    allGoalSelect() {
      if (this.onekey) {
        //全选时
        //select都设置为true
        this.list.forEach((item, index) => {
          item.select = true;
        });
        this.onekey = 0;
      } else {
        //全不选时
        //全不选时select都设置为false
        this.list.forEach((item, index) => {
          item.select = false;
        });
        // 全不选时设置对应onekey字符串
        this.onekey = 1;
        //全不选时isSelect设置为true
        this.isSelect = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.select_box {
  width: 300px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  .select_list {
    .select_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100px;
      height: 40px;
      border: 1px solid #000;
      img {
        // width: 25px;
        // height: 25px;
      }
    }
  }
}
</style>
